<template>
  <el-image
      v-if="props.src"
      :preview-src-list="previewSrcList"
      :preview-teleported="true"
      :src="url"
      :style=style
  >
    <template #error>
      <el-icon :size="size">
        <picture-filled/>
      </el-icon>
    </template>
  </el-image>

  <el-icon v-else :size="size">
    <picture-filled/>
  </el-icon>
</template>

<script setup>
import {computed} from 'vue'
import {ElIcon, ElImage} from 'element-plus'
import {PictureFilled} from '@element-plus/icons-vue'

const props = defineProps({
  src: {
    type: [String, Object, Array],
    default: null,
  },
  size: {
    type: Number,
    default: 100, // 默认大小
  },
})

const url = computed(() => {
  if (typeof props.src === 'string') {
    return props.src
  }
  return Array.isArray(props.src) ? props.src[0]?.url : props.src.url
})

const previewSrcList = computed(() => {
  if (props.src === String) {
    return [props.src]
  }
  return Array.isArray(props.src) ? props.src.map(e => e.url) : [props.src.url]
})
const style = computed(() => `width: ${props.size}px; height: ${props.size}px; border-radius: 10px`)
</script>

<style scoped>
</style>